<template>
  <div class="register-bg">
    <div class="register-card">
      <div class="register-title">{{ registerTitle }}</div>
      <el-form :model="form" label-width="0" class="register-form">
        <el-form-item v-if="isStudent">
          <el-input v-model="form.username" placeholder="学号" class="input-main" />
        </el-form-item>
        <el-form-item v-if="isTeacher">
          <el-input v-model="form.username" placeholder="工号" class="input-main" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="密码" class="input-main" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.real_name" placeholder="姓名" class="input-main" />
        </el-form-item>
        <el-form-item v-if="isStudent">
          <el-input v-model="form.phone" placeholder="手机" class="input-main" />
        </el-form-item>
        <el-form-item v-if="isStudent">
          <el-input v-model="form.id_card" placeholder="身份证" class="input-main" />
        </el-form-item>
        <el-form-item v-if="isStudent">
          <el-input v-model="form.college" placeholder="学院" class="input-main" />
        </el-form-item>
        <el-form-item v-if="isStudent">
          <el-input v-model="form.grade" placeholder="年级" class="input-main" />
        </el-form-item>
        <el-form-item v-if="isStudent">
          <el-input v-model="form.clazz" placeholder="班级" class="input-main" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="register-btn" @click="onRegister">注册</el-button>
        </el-form-item>
        <div style="text-align:right;margin-top:-10px;">
          <el-link type="primary" @click="goLogin">已有账号？去登录</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();
const form = ref({ username: '', password: '', real_name: '', phone: '', id_card: '', college: '', grade: '', clazz: '' });
const role = computed(() => route.query.role || 'student');
const isStudent = computed(() => role.value === 'student');
const isTeacher = computed(() => role.value === 'teacher');
const registerTitle = computed(() => isStudent.value ? '学生注册' : isTeacher.value ? '教师注册' : '注册');
function onRegister() {
  // TODO: 调用后端API进行注册
  if (!form.value.username || !form.value.password || !form.value.real_name) {
    ElMessage.error('请填写完整信息');
    return;
  }
  ElMessage.success('注册成功！');
  goLogin();
}
function goLogin() {
  router.push(`/login?role=${role.value}`);
}
</script>
<style scoped>
.register-bg {
  min-height: 100vh;
  background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80') center center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.register-card {
  background: #554c3c;
  border-radius: 20px;
  box-shadow: 0 4px 24px #2226;
  padding: 36px 32px 24px 32px;
  width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.register-title {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  letter-spacing: 2px;
}
.register-form {
  width: 100%;
}
.input-main {
  border-radius: 10px;
  background: #f8f8e6;
  font-size: 16px;
  height: 40px;
}
.register-btn {
  width: 100%;
  background: #b6d43a;
  color: #222;
  border: none;
  font-weight: bold;
  font-size: 18px;
  border-radius: 10px;
  margin-top: 8px;
}
</style> 